<template>
  <div class="home">
    <div class="header">
      <div class="logo"></div>
      <div class="titleMain">
        <h1>镀锌炉温动态控制模型</h1>
      </div>
    </div>
    <div class="home-main">
      <el-row class="top h-90%">
        <el-col class="top-left" :span="7.2">
          <div class="msg-title">重要信息提示</div>
          <div class="information">
            <el-carousel height="100%" autoplay class="h-100% w-100%" direction="vertical" :interval="3000" indicator-position="none">
              <span style="color: transparent !important">{{ warningInfo[0].value }}</span>
              <!-- <span class="scroll-text">&nbsp; </span> -->
              <!-- <span class="scroll-text" v-for="item in warningInfo">&nbsp; {{ item.value }}</span> -->
              <!-- <el-icon style="color: red !important"><SuccessFilled /></el-icon> -->
              <el-carousel-item v-for="item in warningInfo" :key="item" style="color: white">
                {{ item.value }}
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="svg">
            <svg-load name="combinedCAGalvTempModel"></svg-load>
          </div>
        </el-col>
        <el-col class="top-middle" :span="12">
          <new-coil-card title="设定信息" class="common_table">
            <el-table :data="warningTableData" style="width: 100%" :header-cell-style="{ background: '#2f59af', color: '#fff' }">
              <el-table-column prop="chinese" label="" width="180px" />
              <el-table-column prop="furnaceTemperature12" label="炉温1&2">
                <template #default="scope">
                  <span v-if="scope.$index === 0 || scope.$index === 1">
                    {{ scope.row.furnaceTemperature12 }}
                    <img :src="imagePath(scope.$index)" />
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="furnaceTemperature34" label="炉温3&4">
                <template #default="scope">
                  <span v-if="scope.$index === 0 || scope.$index === 1">
                    {{ scope.row.furnaceTemperature34 }}
                    <img :src="imagePath(scope.$index)" />
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="furnaceTemperature56" label="炉温5&6">
                <template #default="scope">
                  <span v-if="scope.$index === 0 || scope.$index === 1">
                    {{ scope.row.furnaceTemperature56 }}
                    <img :src="imagePath(scope.$index)" />
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="furnaceTemperature7" label="炉温7">
                <template #default="scope">
                  <span v-if="scope.$index === 0 || scope.$index === 1">
                    {{ scope.row.furnaceTemperature7 }}
                    <img :src="imagePath(scope.$index)" />
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="slowCool" label="缓冷">
                <template #default="scope">
                  <span v-if="scope.$index === 0 || scope.$index === 1">
                    {{ scope.row.slowCool }}
                    <img :src="imagePath(scope.$index)" />
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="steelType" label="钢种">
                <template #default="scope">
                  <span v-if="scope.$index === 0 || scope.$index === 1">
                    {{ scope.row.steelType }}
                    <img :src="imagePath(scope.$index)" />
                  </span>
                </template>
              </el-table-column>
            </el-table>
          </new-coil-card>
        </el-col>
        <el-col class="top-right" :span="4.8">
          <new-coil-card title="各炉段分区" class="common_table">
            <el-table
              :data="furnaceSectionTableData"
              :span-method="objectSpanMethod"
              style="width: 100%"
              :header-cell-style="{ background: '#2f59af', color: '#fff' }"
              :show-header="false"
            >
              <el-table-column prop="heat" label="heat" />
              <el-table-column prop="key" label="功能" />
              <el-table-column prop="value" label="值">
                <template #default="scope">
                  <span v-if="scope.$index === 0 || scope.$index === 2 || scope.$index === 4">
                    <img :src="imagePath(scope.$index)" />
                  </span>
                </template>
              </el-table-column>
            </el-table>
          </new-coil-card>
        </el-col>
      </el-row>
      <el-row class="middle">
        <el-col :span="19.8" class="middle-left">
          <el-row>
            <el-col :span="6.6" class="annealing_graph_1-1">
              <new-coil-card title="P4与退火曲线实时对比">
                <graph-anneal :graph-data-upper="upperGraph" :graph-data-anneal="p4Array" :graph-data-lower="lowerGraph" :xdata="p4XdArray" />
              </new-coil-card>
            </el-col>
            <el-col :span="6.6" class="annealing_graph_1-2">
              <new-coil-card title="P5与退火曲线实时对比">
                <graph-anneal :graph-data-upper="upperGraph" :graph-data-anneal="p4Array" :graph-data-lower="lowerGraph" :xdata="p4XdArray" />
              </new-coil-card>
            </el-col>
            <el-col :span="6.6" class="annealing_graph_1-3">
              <new-coil-card title="P6与退火曲线实时对比">
                <graph-anneal :graph-data-upper="upperGraph" :graph-data-anneal="p4Array" :graph-data-lower="lowerGraph" :xdata="p4XdArray" />
              </new-coil-card>
            </el-col>
          </el-row>
          <!-- <el-row>
            <el-col :span="6.6" class="annealing_graph_2-1">
              <new-coil-card title="P8与退火曲线实时对比">
                <cpc-width
                  :act-width="p4Array"
                  :set-width="lowerLimit_P4"
                  :set-width2="upperLimit_P4"
                  :xdata="p4XdArray"
                  :series-name="graphPropsName.p8"
                />
              </new-coil-card>
            </el-col>
            <el-col :span="6.6" class="annealing_graph_2-2">
              <new-coil-card title="P9与退火曲线实时对比">
                <cpc-width
                  :act-width="p4Array"
                  :set-width="lowerLimit_P4"
                  :set-width2="upperLimit_P4"
                  :xdata="p4XdArray"
                  :series-name="graphPropsName.p9"
                />
              </new-coil-card>
            </el-col>
            <el-col :span="6.6" class="annealing_graph_2-3">
              <new-coil-card title="P10与退火曲线实时对比">
                <cpc-width
                  :act-width="p4Array"
                  :set-width="lowerLimit_P4"
                  :set-width2="upperLimit_P4"
                  :xdata="p4XdArray"
                  :series-name="graphPropsName.p10"
                />
              </new-coil-card>
            </el-col>
          </el-row> -->
        </el-col>
        <el-col :span="4.2" class="middle-right">
          <new-coil-card title="基本信息" class="common_table">
            <el-table :data="baseInfoTableData" style="width: 100%" :header-cell-style="{ background: '#2f59af', color: '#fff' }">
              <el-table-column prop="基本信息" label="基本信息" />
              <el-table-column prop="当前卷" label="当前卷">
                <template #default="scope">
                  <span v-if="scope.$index === 5">
                    <img :src="imagePath(scope.$index)" />
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="下一卷" label="下一卷">
                <template #default="scope">
                  <span v-if="scope.$index === 5">
                    <img :src="imagePath(scope.$index)" />
                  </span>
                </template>
              </el-table-column>
            </el-table>
          </new-coil-card>
        </el-col>
      </el-row>
      <el-row class="foot-lineChart">
        <el-col :span="19.8" class="foot-lineChart-left">
          <new-coil-card title="实时温度曲线">
            <template #header-right>
              <el-select v-model="temGraphOption" placeholder="请选择" @change="handleOptionChange" label="炉区" class="real-time_tem_select">
                <el-option v-for="item in temGraphOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </template>
            <div class="real-time_tem_graph">
              <graph-card :graph-data-a-i="graphDataAI" :graph-data-m-m="graphDataMM" :graph-data-p-l-c="graphDataPLC" :xdata="timeArray" />
            </div>
          </new-coil-card>
        </el-col>
        <el-col :span="4.2" class="foot-lineChart-right">
          <new-coil-card title="钢卷信息" class="common_table">
            <el-table :data="footTable" style="width: 100%" :header-cell-style="{ background: '#2f59af', color: '#fff' }">
              <el-table-column prop="卷号" label="卷号" :width="columnWidth(20)" />
              <el-table-column prop="钢种" label="钢种" :width="columnWidth(16)" />
              <el-table-column prop="宽度" label="宽度" :width="columnWidth(16)" />
              <el-table-column prop="厚度" label="厚度" :width="columnWidth(16)" />
              <el-table-column prop="命中率" label="命中率" :width="columnWidth(16)" />
            </el-table>
          </new-coil-card>
        </el-col>
      </el-row>
      <el-row class="foot">
        <el-col :span="24">
          <new-coil-card title="AI模型投用状态" class="common_table">
            <el-table :data="aiModeTableData" style="width: 100%" :header-cell-style="{ background: '#2f59af', color: '#fff' }">
              <el-table-column prop="furnaceTemperature12" label="炉温1&2" align="center">
                <template #default="scope">
                  <span v-if="scope.$index === 0">
                    <img :src="imagePath(scope.$index)" />
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="furnaceTemperature34" label="炉温3&4" align="center">
                <template #default="scope">
                  <span v-if="scope.$index === 0">
                    <img :src="imagePath(scope.$index)" />
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="furnaceTemperature56" label="炉温5&6" align="center">
                <template #default="scope">
                  <span v-if="scope.$index === 0">
                    <img :src="imagePath(scope.$index)" />
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="furnaceTemperature7" label="炉温7" align="center">
                <template #default="scope">
                  <span v-if="scope.$index === 0">
                    <img :src="imagePath(scope.$index)" />
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="slowCool" label="缓冷" align="center">
                <template #default="scope">
                  <span v-if="scope.$index === 0">
                    <img :src="imagePath(scope.$index)" />
                  </span>
                </template>
              </el-table-column>
            </el-table>
          </new-coil-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts">
  // import { defineComponent, ref } from 'vue';
  import NewCoilCard from '/@/components/NewCoilCard/NewCoilCard.vue';
  import CpcWidth from '/@/components/CpcWidth/CpcWidth.vue';
  import { ref, reactive, computed, onMounted, onUnmounted, nextTick, defineComponent, watch, onBeforeMount } from 'vue';
  import * as echarts from 'echarts/core';
  import { BarChart, LineChart } from 'echarts/charts';
  import { TitleComponent, TooltipComponent, GridComponent, LegendComponent, MarkLineComponent } from 'echarts/components';
  import { CanvasRenderer } from 'echarts/renderers';
  import MEcharts from '/@/components/MEcharts/MEcharts.vue';
  import GraphCard from '/@/components/CpcWidth/GraphCard.vue';
  import GraphAnneal from '/@/components/GraphDraw/GraphAnneal.vue';
  import dayjs from 'dayjs';
  import { furnaceTempDynamicCtrlApi } from '/@/api/furnaceTempDynamicCtrl/index';
  import axios from 'axios';

  // Register ECharts components
  echarts.use([TitleComponent, TooltipComponent, GridComponent, LegendComponent, BarChart, LineChart, CanvasRenderer, MarkLineComponent]);
  // import Image from '/@/assets/images';
  // import dayjs from 'dayjs';

  export default defineComponent({
    components: {
      NewCoilCard,
      CpcWidth,
      MEcharts,
      GraphCard,
      GraphAnneal,
      // SvgLoad,
    },
    setup() {
      const warningTableData = ref([
        {
          chinese: '工艺过度异常提示',
          furnaceTemperature12: '2C',
          furnaceTemperature34: '30A',
          furnaceTemperature56: '10A',
          furnaceTemperature7: '1C',
          slowCool: '1C',
          steelType: '钢种',
        },
        {
          chinese: '当前卷AI模型设定值',
          furnaceTemperature12: '2C',
          furnaceTemperature34: '30A',
          furnaceTemperature56: '10A',
          furnaceTemperature7: '1C',
          slowCool: '1C',
          steelType: '钢种',
        },
        {
          chinese: '下一卷AI模型设定值',
          furnaceTemperature12: '2C',
          furnaceTemperature34: '30A',
          furnaceTemperature56: '10A',
          furnaceTemperature7: '1C',
          slowCool: '1C',
          steelType: '钢种',
        },
        {
          chinese: '实际值',
          furnaceTemperature12: '2C',
          furnaceTemperature34: '30A',
          furnaceTemperature56: '10A',
          furnaceTemperature7: '1C',
          slowCool: '1C',
          steelType: '钢种',
        },
        // {
        //   chinese: '电阻带功率(KW)',
        //   heatingSection: '-',
        //   oxidationSection: '-',
        //   insulationSection: '-',
        //   coolingSection: '100°C',
        //   fastCoolingSection: '100°C',
        // },
        // { chinese: 'PVOCVO', 加热段: 'PVOCVO', 氧化段: 'PVOCVO', 保温段: 'PVOCVO', 缓冷段: 'PVOCVO', 快冷段: 'PVOCVO' },
      ]);
      const furnaceSectionTableData = ref([
        { heat: 'heat1&2', key: '供热能力', value: 'true' },
        { heat: 'heat1&2', key: '烧嘴使用率', value: '5%' },
        { heat: 'heat3&4', key: '供热能力', value: 'true' },
        { heat: 'heat3&4', key: '烧嘴使用率', value: '5%' },
        { heat: 'heat5&6', key: '供热能力', value: 'true' },
        { heat: 'heat1&2', key: '烧嘴使用率', value: '5%' },
        { heat: 'heat7', key: '烧嘴使用率', value: '5%' },
      ]);
      const baseInfoTableData = ref([
        { 基本信息: '钢卷号', 当前卷: '记录集', 下一卷: '记录集' },
        { 基本信息: '钢种', 当前卷: '记录集', 下一卷: '记录集' },
        { 基本信息: '宽度', 当前卷: '记录集', 下一卷: '记录集' },
        { 基本信息: '厚度', 当前卷: '记录集', 下一卷: '记录集' },
        // { 基本信息: '调制度', 当前卷: '记录集', 下一卷: '记录集' },
        { 基本信息: '反射率异常', 当前卷: 'false', 下一卷: 'true' },
      ]);
      const aiModeTableData = ref([
        { furnaceTemperature12: '', furnaceTemperature34: '', furnaceTemperature56: '', furnaceTemperature7: '', slowcool: '' },
      ]);
      const footTable = ref([
        { 卷号: 'L19901001001', 钢种: 'SPEC-H', 宽度: '1099', 厚度: '0.199', 命中率: '99%' },
        { 卷号: 'L19901001001', 钢种: 'SPEC-H', 宽度: '1099', 厚度: '0.199', 命中率: '99%' },
        { 卷号: 'L19901001001', 钢种: 'SPEC-H', 宽度: '1099', 厚度: '0.199', 命中率: '99%' },
        { 卷号: 'L19901001001', 钢种: 'SPEC-H', 宽度: '1099', 厚度: '0.199', 命中率: '99%' },
        { 卷号: 'L19901001001', 钢种: 'SPEC-H', 宽度: '1099', 厚度: '0.199', 命中率: '99%' },
        { 卷号: 'L19901001001', 钢种: 'SPEC-H', 宽度: '1099', 厚度: '0.199', 命中率: '99%' },
        { 卷号: 'L19901001001', 钢种: 'SPEC-H', 宽度: '1099', 厚度: '0.199', 命中率: '99%' },
        { 卷号: 'L19901001001', 钢种: 'SPEC-H', 宽度: '1099', 厚度: '0.199', 命中率: '99%' },
        { 卷号: 'L19901001001', 钢种: 'SPEC-H', 宽度: '1099', 厚度: '0.199', 命中率: '99%' },
      ]);

      // 下拉框选项
      const temGraphOptions = [
        { value: '炉温1&2', label: '炉温1&2' },
        { value: '炉温3&4', label: '炉温3&4' },
        { value: '炉温5&6', label: '炉温5&6' },
        { value: '炉温7', label: '炉温7' },
      ];
      const temGraphOption = ref('炉温1&2'); // 默认选中AI数据

      // --- 生命周期钩子 ---
      let updateTimer: number | null = null;
      let interval: any = null;
      let condition = true;

      const graphDataAI = ref<number[]>([]);
      const graphDataMM = ref<number[]>([]);
      const graphDataPLC = ref<number[]>([]);

      const p4Array = ref<number[]>([1000, 1002, 1001, 1003, 1000, 1004, 1002, 1001, 1003, 1000]);
      const p4XdArray = ref<string[]>(['08:00', '08:05', '08:10', '08:15', '08:20', '08:25', '08:30', '08:35', '08:40', '08:45']);
      // const lowerLimit_P4 = ref<number>(1000);
      // const upperLimit_P4 = ref<number>(1003);
      const lowerGraph = ref<number[]>([1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000]);
      const upperGraph = ref<number[]>([1003, 1003, 1003, 1003, 1003, 1003, 1003, 1003, 1003, 1003]);
      const timeArray = ref<string[]>([]);

      const updateChart = (data: number[]) => {
        data.push(Math.floor(Math.random() * 70) + 1000);
      };

      const objectSpanMethod = ({ rowIndex, columnIndex }: { rowIndex: number; columnIndex: number }) => {
        if (columnIndex === 0) {
          if (rowIndex % 2 === 0) {
            return { rowspan: 2, colspan: 1 };
          } else {
            return { rowspan: 0, colspan: 0 };
          }
        }
      };
      const graphPropsName = reactive({
        p4: 'p4',
        p5: 'p5',
        p6: 'p6',
        p8: 'p8',
        p9: 'p9',
        p10: 'p10',
      });

      const warningInfo = [
        { value: '请注意，连退炉当前温度低于设定值，请及时调整。' },
        { value: '镀锌炉的运行效率出现下降，可能需要检查设备。' },
        { value: '系统检测到连退炉的电压波动较大，请联系技术人员。' },
        { value: '镀锌炉的温度控制系统可能出现故障，建议尽快处理。' },
        { value: '连退炉的冷却水流量异常，请确认管道是否畅通。' },
        { value: '当前镀锌炉的气体流量超出正常范围，请进行调整。' },
        { value: '系统提示，连退炉的温度传感器可能需要校准。' },
        { value: '请注意，镀锌炉的运行参数已超出安全范围，请立即处理。' },
        { value: '连退炉的加热元件可能出现损坏，建议进行维修。' },
        { value: '当前连退炉的温度变化速率较快，可能影响产品质量。' },
      ];
      const columnWidth = (percent: number) => {
        const tableWidth = 500; // 根据实际父容器宽度设置
        return (tableWidth * percent) / 100 + 'px';
      };

      const columnHeight = (percent: number) => {
        const tableHeight = 500; // 根据实际父容器高度设置
        return (tableHeight * percent) / 100 + 'px';
      };

      const imagePath = (rowIndex: number) => {
        const name = 'red.png';
        // if (rowIndex === 1 || rowIndex === 0) {
        return `/src/assets/images/${name}`;
        // }
      };

      const fetchData = () => {
        getZoneTrk();
        getFurnaceSectionTableData();
      };

      const handleOptionChange = () => {
        console.log(temGraphOption.value);
      };

      // 钢卷跟踪
      async function getZoneTrk() {
        const param = {
          // action: 'get_tags',
          // operator: 'abc ',
          // terminal: 'FM_01',
          // body: [
          //   {
          //     tagName: 'CGL1870TRACK',
          //     timestamp: 0,
          //   },
          // ],
        };
        const result = await furnaceTempDynamicCtrlApi.getZoneTrk(param);
      }

      // 警告信息
      async function getWarningTableData() {
        const param = {};
        const result = await furnaceTempDynamicCtrlApi.getWarningTableData(param);
        warningTableData.value = result.data;
      }

      // 各炉段分区
      async function getFurnaceSectionTableData() {
        const param = {
          action: 'get_tags',
          operator: 'abc ',
          terminal: 'FM_01',
          body: [
            {
              tagName: 'CGL1870TRACK',
              timestamp: 0,
            },
          ],
        };
        const result = await axios.get('/http://10.171.7.122:8088/HMI', { params: param });
        console.log(result.data);
        // furnaceSectionTableData.value = result.data;
      }

      // 基本信息
      async function getBaseInfoTableData() {
        const param = {};
        const result = await furnaceTempDynamicCtrlApi.getBaseInfoTableData(param);
        baseInfoTableData.value = result.data;
      }

      // 退火曲线
      async function getAnnealingGraphData() {
        const param = {};
        const result = await furnaceTempDynamicCtrlApi.getAnnealingGraphData(param);
        p4Array.value = result.data.p4Array;
        p4XdArray.value = result.data.p4XdArray;
        // lowerLimit_P4.value = result.data.setP4;
        // upperLimit_P4.value = result.data.setP4_2;
      }

      onBeforeMount(() => {
        interval = setInterval(() => {
          updateChart(graphDataAI.value);
          // console.log(graphDataAI.value);
          updateChart(graphDataMM.value);
          updateChart(graphDataPLC.value);
          timeArray.value.push(dayjs().format('HH:mm:ss'));
        }, 2000);
        // updateGraphData();
      });

      watch(
        () => {
          return timeArray.value.length;
        },
        () => {
          if (timeArray.value.length > 11) {
            timeArray.value.shift();
          }
          if (graphDataAI.value.length > 11) {
            graphDataAI.value.shift();
          }
          if (graphDataMM.value.length > 11) {
            graphDataMM.value.shift();
          }
          if (graphDataPLC.value.length > 11) {
            graphDataPLC.value.shift();
          }
        }
      );

      onMounted(() => {
        fetchData();
      });

      onUnmounted(() => {
        timeArray.value = [];
        graphDataAI.value = [];
        graphDataMM.value = [];
        graphDataPLC.value = [];
        condition = false;
      });

      return {
        warningTableData,
        objectSpanMethod,
        furnaceSectionTableData,
        baseInfoTableData,
        aiModeTableData,
        footTable,
        columnWidth,
        columnHeight,
        graphDataAI,
        timeArray,
        graphDataMM,
        graphDataPLC,
        imagePath,
        p4Array,
        // lowerLimit_P4,
        // upperLimit_P4,
        lowerGraph,
        upperGraph,
        p4XdArray,
        graphPropsName,
        temGraphOptions,
        temGraphOption,
        handleOptionChange,
        warningInfo,
      };
    },
  });
</script>
<style scoped lang="less">
  .top {
    height: 25vh;
    width: 100%;
    display: flex;
    flex-direction: column;

    .top-left {
      width: 30vw;
      height: 25vh;
      display: flex;
      flex-direction: column;

      .svg {
        width: 100%;
        height: 20vh;
        flex-shrink: 0;

        svg {
          width: 100%;
          height: 100%;
        }
      }

      .msg-title {
        top: -4vh;
        left: 39.5vw;
        background-image: -webkit-linear-gradient(left, #0072ff, #00eaff, #01aaff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 2vh;
        font-weight: bolder;
        width: 10vw;
      }

      .information {
        color: #fff;
        width: 30vw;
        height: 3.5vh;
        top: -1vh;
        left: -1.2vw;
        border: 2px solid #3981d9;
        border-radius: 5px;
        padding: 0 0.2vw;
      }
    }

    .top-middle {
      height: 25vh;
      width: 48vw;
      margin-right: 0.9%;
      margin-left: 1%;

      :deep(.el-table-column) {
        &:nth-child(1) {
          width: 20% !important;
        }
        &:nth-child(n + 2) {
          width: 16% !important;
        }
      }
    }

    .top-right {
      height: 25vh;
      width: 20vw;
      display: flex;
      flex-direction: column;
      margin-right: 0.1%;
    }
  }

  .middle {
    height: 30vh;
    width: 100%;
    margin-top: 1%;

    .middle-left {
      height: 30vh;
      width: 79vw;

      .annealing_graph_1-1 {
        height: 29vh;
        width: 26vw;
      }

      .annealing_graph_1-2 {
        height: 29vh;
        width: 26vw;
        margin-left: 0.5vw;
        margin-right: 0.5vw;
      }

      .annealing_graph_1-3 {
        height: 29vh;
        width: 26vw;
      }

      // .annealing_graph_2-1 {
      //   height: 14.5vh;
      //   width: 26vw;
      //   margin-top: 1vh;
      // }

      // .annealing_graph_2-2 {
      //   height: 14.5vh;
      //   width: 26vw;
      //   margin-top: 1vh;
      //   margin-left: 0.5vw;
      //   margin-right: 0.5vw;
      // }

      // .annealing_graph_2-3 {
      //   height: 14.5vh;
      //   width: 26vw;
      //   margin-top: 1vh;
      // }
    }

    .middle-right {
      width: 20vw;
      height: 100%;
      margin-left: 0.9%;
      margin-right: 0.1%;
    }
  }

  .foot-lineChart {
    height: 22vh;
    width: 100%;
    margin-top: 1%;

    .foot-lineChart-left {
      height: 100%;
      width: 79vw;
      .real-time_tem_graph {
        height: 100%;
        width: 100%;
      }
    }

    .foot-lineChart-right {
      width: 20vw;
      height: 100%;
      margin-left: 0.9%;
      margin-right: 0.1%;
      // overflow: auto;
      overflow: hidden;
      :deep(.el-table-column) {
        width: 20% !important;
        &:first-child {
          width: 25% !important;
        }
      }
      :deep(.el-table) {
        // 禁用全局滚动
        overflow: hidden !important;
        height: 25vh !important;

        // 固定表头
        .el-table__header-wrapper {
          position: sticky;
          top: 0;
          z-index: 2;
          background: #2f59af; // 与header背景色同步
        }

        // 数据滚动容器
        .el-table__body-wrapper {
          overflow-y: auto !important;
          overflow-x: hidden !important; // 禁用横向滚动
          max-height: calc(25vh - 38px); // 精确计算数据区高度
        }

        // 行高与字体压缩
        .el-table__row {
          height: 26px !important;
          td {
            padding: 1px 4px !important;
            .cell {
              font-size: 12px !important;
              transform: scale(0.85);
              transform-origin: left;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis; // 长文本显示...
            }
          }
        }

        // 滚动条样式 (与主题色匹配)
        .el-table__body-wrapper::-webkit-scrollbar {
          width: 6px;
          background: rgba(47, 89, 175, 0.2); // 半透明背景
        }
        .el-table__body-wrapper::-webkit-scrollbar-thumb {
          background: #2f59af; // 主蓝
          border-radius: 3px;
          &:hover {
            background: #3a6cd6;
          }
        }
      }

      // 列宽分配 (5列布局)
      :deep(.el-table__header) {
        th {
          &:nth-child(1) {
            width: 28%;
          } // 卷号
          &:nth-child(2) {
            width: 18%;
          } // 钢种
          &:nth-child(3) {
            width: 18%;
          } // 宽度
          &:nth-child(4) {
            width: 18%;
          } // 厚度
          &:nth-child(5) {
            width: 18%;
          } // 命中率
        }
      }
    }
  }

  .foot {
    height: 10vh;
    width: 100%;
    margin-top: 1%;
    :deep(.el-table-column) {
      width: 20% !important;
    }
  }

  .home {
    background-size: cover;
    position: relative;
    overflow: hidden;
    height: 100vh;
    display: grid;
    grid-template-rows: 5vh 17vh 35vh 40vh;
    grid-row-gap: 1vh;
    background-size: 100% 100%;
  }

  /* 表格 */
  .coiler_elTableContainer .el-table {
    --el-table-border-color: transparent;
  }

  :deep(.coiler_elTableContainer .el-table tr) {
    background-color: transparent;
  }

  :deep(.coiler_elTableContainer .el-table__row .el-table_1_column_1 .cell .cell_row) {
    background-color: transparent;
  }

  :deep(.coiler_elTableContainer .el-table__row .cell) {
    border-radius: 4px;
    width: 100%;
    padding: 1px 0;
    height: 3vh;
    border: #06279d;
    border-style: solid;
    border-width: 1px;
  }

  :deep(.coiler_elTableContainer .el-table__row .cell_row) {
    background-color: #05c8e6;
    border-radius: 4px;
    width: 95%;
    width: 97%;
    margin: 2px 2px;
    height: 2.3vh;
    font-weight: bolder;
  }

  /**>uncoiler_elTableContainer*/
  .uncoiler_elTableContainer {
    margin-right: 0.5vw;
  }

  .uncoiler_elTableContainer .el-table {
    --el-table-border-color: transparent;
  }

  :deep(.uncoiler_elTableContainer .el-table tr) {
    background-color: transparent;
  }

  :deep(.uncoiler_elTableContainer .el-table__row .el-table_2_column_4 .cell .cell_row) {
    background-color: transparent;
  }

  :deep(.uncoiler_elTableContainer .el-table__row .cell) {
    border-radius: 4px;
    width: 100%;
    padding: 1px 0;
    height: 3vh;
    border: #06279d;
    border-style: solid;
    border-width: 1px;
    font-size: 0.8vw;
  }

  :deep(.uncoiler_elTableContainer .el-table__row .cell_row) {
    background-color: #05c8e6;
    border-radius: 4px;
    width: 95%;
    width: 97%;
    margin: 2px 2px;
    height: 2.3vh;
    font-weight: bolder;
  }

  .common_table .el-table {
    --el-table-row-hover-bg-color: unset;
    flex: 1; /* 填充剩余空间 */
    display: flex;
    flex-direction: column;
  }

  .entrance_material_roll .el-table {
    --el-table-row-hover-bg-color: unset;
  }

  :deep(.el-table) {
    background-color: transparent;
    --el-table-border: none;
    color: white;

    .el-table__row {
      height: 28px !important;
      line-height: 1.2;
    }
    .el-table__cell {
      padding: 2px 4px !important; // 横向纵向同时压缩
      .cell {
        font-size: 12px !important;
        transform: scale(0.85); // 字体缩放
        transform-origin: left; // 防止内容偏移
        white-space: nowrap; // 禁止换行
        overflow: hidden;
        text-overflow: ellipsis; // 溢出显示...
      }
    }
    el-table__header-wrapper,
    .el-table__body-wrapper {
      min-width: 100% !important;
      width: auto !important;
    }
  }

  :deep(.el-table__inner-wrapper::before) {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
  }

  :deep(.el-table th),
  :deep(.el-table tr),
  :deep(.el-table td) {
    background-color: transparent;
  }

  :deep(.common_table .el-table__row:nth-child(odd)) {
    background-color: #223671;
  }

  :deep(.containerContent .el-table .el-table__cell) {
    padding: 0.54vh 0;
  }

  :deep(.containerContent .el-table .cell) {
    font-size: 0.8vw;
    padding: 0 0.3vw;
  }

  :deep(.entrance_material_roll .el-table .cell) {
    font-size: 0.6vw;
    padding: 0px;
  }

  /* 深度选择器修改 el-select 内部元素的样式 */
  :deep(.real-time_tem_select .el-select__wrapper) {
    // background-color: rgba(41, 121, 255, 0.2) !important;
    background-color: transparent !important;
    border: 1px solid #42b4ff !important;
    // border: 1px solid #fff !important;
    box-shadow: 0 0 8px rgba(41, 121, 255, 0.5) !important;
    // height: 22px !important;
    // width: 110px;
  }

  :deep(.real-time_tem_select .el-input__inner) {
    // height: 20px !important;
    // line-height: 20px !important;
    // font-size: 11px !important;
    color: #fff !important;
    // padding: 0 10px;
  }

  :deep(.real-time_tem_select .el-select__caret) {
    // font-size: 11px !important;
    // color: #42b4ff;
  }

  :deep(.real-time_tem_select .el-select__placeholder) {
    // font-size: 11px !important;
    // color: #a0a3a8;
    color: #fff;
  }

  .scroll-text {
    display: inline-block;
    max-width: 280px;
    animation: marquee 15s linear infinite;
    white-space: nowrap;
    overflow: hidden;
  }

  @keyframes marquee {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }
</style>
